<template>
  <div>
    <div class="rankTitle">动态</div>
    <!--<div class="dynamicToday"> - 今日精选 - </div>-->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="dynamicContent">
        <div class="dynamicList" v-for="(message,index) in sum" :key="index">
          <div class="dynamicTop">
            <span class="dynamicIcon"><img :src="message.data.header.icon" alt=""></span>
            <span class="dynamicTitle">{{message.id}}</span>
          </div>
          <div class="dynamicDescription">接口有毛病接口有毛病接口有毛病接口有毛病接口有毛病接口有毛病接口有毛病接口有毛病接口有毛病</div>
          <img class="dynamicImg" :src="message.data.content.data.cover.detail" alt="">
          <div class="dynamicArea">{{message.data.content.data.releaseTime}}</div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        messages1:"",
        messages2:"",
        messages3:"",
        sum:'',
        isLoading: false
      }
    },
    created () {
      this.$axios.get("https://api.apiopen.top/todayVideo")
        .then(res => {
          /*console.log(res.data.result.slice(1))*/
          this.messages1 = res.data.result.slice(1,4)
          this.messages2 = res.data.result.slice(5,8)
          this.messages3 = res.data.result.slice(9,12)
          this.sum = this.messages1.concat(this.messages2,this.messages3)
          this.sum.forEach(v => {
            /*console.log(v.data.content.data.releaseTime)*/
          })
        })
    },
    methods:{
      onRefresh() {
        setTimeout(() => {
          this.$toast('刷新成功');
          this.isLoading = false;
        }, 500);
      }
    }
  }
</script>

<style lang="less">
  .rankTitle {
    width: 100%;
    height: 6rem;
    z-index: 1000;
    background-color: #f4f4f4;
    color: #000;
    line-height: 6rem;
    text-align: center;
    font-size: 2.5rem;
    /*border-bottom: 0.1rem solid #f2f2f2;*/
    box-shadow: 0rem 0.5rem 0.5rem #bbb;
  }

  /*.dynamicToday {
    padding-top: 2.5rem;
    font-size: 2rem;
  }*/

  .dynamicContent{
    width: 100%;
    padding: 0 2rem;
    .dynamicList{
      width: 100%;
      padding-top: 2rem;
      .dynamicTop{
        width: 100%;
        height: 4rem;
        position: relative;
        .dynamicIcon{
          display: inline-block;
          width: 4rem;
          img{
            display: block;
            width: 100%;
            height: 4rem;
            border-radius: 50%;
          }
        }
        .dynamicTitle{
          position: absolute;
          left: 5rem;
          top: 1rem;
        }
      }
      .dynamicDescription{
        width: 100%;
        padding-top: 2rem;
        font-size: 1.4rem;
      }
      .dynamicImg{
        display: block;
        width: 100%;
        height: 23rem;
      }
      .dynamicArea{
        padding-top: 1rem;
        font-size: 1rem;
        text-align: right;
        padding-right: 2rem;
      }
      &:last-child{
        padding-bottom: 6rem;
      }
    }
  }
</style>
